import { Row, Col, Switch, Tag, DatePicker, Tabs } from 'antd'

import { WeaTab, WeaBrowser, WeaOrgTree, WeaNewScroll,WeaAlertPage } from 'ecCom'
import { inject, observer } from 'mobx-react'
import { observable, action, toJS } from 'mobx'
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
const store = ['meetingCalView','meetingDialog'];
@inject(...store)
@observer
export default class RightContainer extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      color: '',
      userRoot: undefined,
    }
  }

  componentWillReceiveProps (nextProps) {
    let {status} = nextProps.meetingCalView
    let {resetMenu} = toJS(status)
  }
  
  componentWillUnmount () {
    //组件卸载时一般清理一些状态
    // let {changeMeetingType} = this.props.meetingCalView
    // changeMeetingType(0)
  }
  
  render () {
    let {status, changeMeetingType, changeMeetingUserRoot} = this.props.meetingCalView
    const {meetingType, nextMeeting, type, viewcondition, userRoot} = toJS(status)
    let caller = []
    const { ecCallerVisible } = this.props.meetingDialog;
    nextMeeting && nextMeeting.caller && caller.push({
      'id': nextMeeting.caller.id,
      'name': nextMeeting.caller.name
    })
    const {color} = this.state
    let topTab = [
      {
        title: getLabel(22260,"会议状态"),
        viewcondition: 0
      },
      {
        title: getLabel(32997,"人员组织"),
        viewcondition: 1
      },
    ]
    let iconMeetingSelected={
      color:'#2db7f5',
      fontSize:'16px',
      marginLeft:'100px',
      position: 'absolute',
      right: '20px',
      top: '8px'
    }
    return (
      <div className="rightC" style={{/*position: 'absolute', width: 210,*/ height: '100%', borderRight: '1px solid #d9d9d9'}}>
        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@j1cnlh`}
          datas = {topTab}
          keyParam="viewcondition"
          onChange = {this.onChange}
          selectedKey = {viewcondition}
        />
        { viewcondition == '0' ?
          <div style={{height: '100%', paddingBottom: 47}}>
            <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@ag88eo`} height={'100%'} className={'right-select-type'}>
              <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@dovckt`} style={{cursor:'pointer',backgroundColor:meetingType==0?'#d9f4ff':(color==0?'#edfaff':''),height:'34px',lineHeight:'34px'}} onMouseEnter={()=>{this.setState({color:0})}} onMouseOut={()=>{this.setState({color:5})}} onClick={()=>{changeMeetingType(0)}}>
                <i className="icon-Meeting-all" style ={{color:'#00bafb',marginLeft:'15px',fontSize:'14px'}} />
                <span style={{marginLeft:'10px'}}>{getLabel(131378,"所有")}</span>
                {meetingType==0?
                  <i className="icon-Meeting-Selected" style={iconMeetingSelected}  />
                  :''}
              </Row>
              <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@c0syqp`} style={{cursor:'pointer',backgroundColor:meetingType==1?'#d9f4ff':(color==1?'#edfaff':''),height:'34px',lineHeight:'34px'}} onMouseEnter={()=>{this.setState({color:1})}} onMouseOut={()=>{this.setState({color:5})}} onClick={()=>{changeMeetingType(1)}}>
                <i className="icon-Meeting-Is-over" style ={{color:'#bdbdbd',marginLeft:'15px',fontSize:'14px'}} />
        
                <span style={{marginLeft:'10px'}}>{getLabel(383417,"已结束")}</span>
                {meetingType==1?
                  <i className="icon-Meeting-Selected" style={iconMeetingSelected}  />
                  :''}
              </Row>
              <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@upfz8t`} style={{cursor:'pointer',backgroundColor:meetingType==2?'#d9f4ff':(color==2?'#edfaff':''),height:'34px',lineHeight:'34px'}} onMouseEnter={()=>{this.setState({color:2})}} onMouseOut={()=>{this.setState({color:5})}} onClick={()=>{changeMeetingType(2)}}>
                <i className="icon-Meeting-In" style ={{color:'#ff9c00',marginLeft:'15px',fontSize:'14px'}} />
        
                <span style={{marginLeft:'10px'}}>{getLabel(1960,"进行中")}</span>
                {meetingType==2?
                  <i className="icon-Meeting-Selected" style={iconMeetingSelected}  />
                  :''}
              </Row>
              <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@nwgas1`} style={{cursor:'pointer',backgroundColor:meetingType==3?'#d9f4ff':(color==3?'#edfaff':''),height:'34px',lineHeight:'34px',marginBottom:'18px'}} onMouseEnter={()=>{this.setState({color:3})}} onMouseOut={()=>{this.setState({color:5})}} onClick={()=>{changeMeetingType(3)}}>
                <i className="icon-Meeting-Not-begin" style ={{color:'#f34555',marginLeft:'15px',fontSize:'14px'}} />
        
                <span style={{marginLeft:'10px'}}>{getLabel(383418,"未开始")}</span>
                {meetingType==3?
                  <i className="icon-Meeting-Selected" style={iconMeetingSelected}  />
                  :''}
              </Row>
              {nextMeeting && (nextMeeting.nodata =="true"?
                  <div style={{position : 'relative', height : 150,borderTop:'1px solid #E2E2E2',marginTop:'30px',marginLeft:'15px',marginRight:'15px'}} >
                  <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@36qlzv`} iconSize={80} icon={'icon-coms-blank'}>
                      <div>
                        {getLabel(82887,"没有需要参加的会议") }
                      </div>
                  </WeaAlertPage>
                </div>
                 
                :
                (<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@dser6t`} style={{borderTop:'1px solid #E2E2E2',marginTop:'30px',marginLeft:'15px',marginRight:'15px'}}>
                  <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@sml0ze`} type="flex" justify="center" align="top" >
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@afqt0i`} span={3} style={{marginTop:'20px'}}>
                      <i className="icon-Meeting-Remind" style={{color:'#ff9c00',fontSize:'19px'}} />
                    </Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@di6f8j`} span={1} style={{marginTop:'20px'}}>
                    </Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@aqjuwv`} span={19} style={{marginTop:'20px'}}>
                      <div style={{color:'#333333' }}>{`${getLabel(383316,"下次会议在")}${nextMeeting && nextMeeting.toptitle}${getLabel(82889,"召开")}`}</div>
                    </Col>
                  </Row>
                  <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@kbpxq2`} type="flex" justify="center" align="top">
            
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@y6l3f4`} span={19} offset = {4}  style={{marginTop:'20px'}}>
                      <div style={{color:'#868686'}}>{nextMeeting && nextMeeting.meetingNameTitle}</div>
                      <div style={{wordWrap:'break-word',color:'#333333'}} onClick={()=>{
                       nextMeeting && nextMeeting.id && this.props.setAll(nextMeeting.id, true, 'preview')
                      }}><a>{(nextMeeting && nextMeeting.meetingName)||""}</a></div>
                    </Col>
                  </Row>
                  <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@48mbl5`} type="flex" justify="center" align="top" >
            
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@jgth35`} span={19} offset = {4}  style={{marginTop:'20px'}}>
                      <div style={{color:'#868686'}}>{nextMeeting && nextMeeting.meetingRoomTitle}</div>
                      <div style={{wordWrap:'break-word',color:'#333333'}}>
                      <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@c7gfbf`}
                        type={87}
                        isSingle={false}
                        replaceDatas={nextMeeting && nextMeeting.meetingRooms}
                        viewAttr={1}
                        linkUrl="/spa/meeting/static4engine/engine.html#/meetingengine/previewroom?roomid="
                        inputStyle = {{width:'100%',color:'#333333'}} />
                        {(nextMeeting && nextMeeting.meetingRoom)||""}
                      </div>
                    </Col>
                  </Row>
                  { ecCallerVisible &&<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@681ih5`} type="flex" justify="center" align="top"  >
            
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3968k7`} span={19} offset = {4}  style={{marginTop:'20px'}}>
                      <div style={{color:'#868686'}}>{nextMeeting && nextMeeting.callerTitle}</div>
                      <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@2kbvsk`}
                        type={17}
                        isSingle={false}
                        replaceDatas={caller}
                        viewAttr={1}
                        inputStyle = {{width:'100%',color:'#333333'}} />
                    </Col>
                  </Row>}
                  <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@nky89g`} type="flex" justify="center" align="top"  >
            
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@07x2bc`} span={19} offset = {4}  style={{marginTop:'20px'}}>
                      <div style={{color:'#868686'}}>{getLabel(131410,"时间")}</div>
                      <div style={{color:'#333333'}}>{nextMeeting.meetingDate && nextMeeting.meetingDate.split(" ")[0]}</div>
                      <div style={{color:'#333333'}}>{nextMeeting.meetingDate && `${nextMeeting.meetingDate.split("~ ")[0].split(" ")[1]} ~ ${nextMeeting.meetingDate.split("~ ")[1].split(" ")[1]}`}</div>
                    </Col>
                  </Row>
                  <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@v12axu`} type="flex" justify="center" align="top" >
            
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@lz50oj`} span={19} offset = {4}  style={{marginTop:'20px'}}>
                      <div style={{color:'#868686'}}>{nextMeeting && nextMeeting.membersTitle}</div>
                      <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@9sb6zj`}
                        type={17}
                        isSingle={false}
                        replaceDatas={nextMeeting && nextMeeting.members}
                        viewAttr={1}
                        inputStyle = {{width:'100%',color:'#333333'}} />
                    </Col>
                  </Row>
                  {nextMeeting && nextMeeting.crms && nextMeeting.crms.length>0?
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@3ihi1e`} type="flex" justify="center" align="top" >
                      <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@hy5oxn`} span={3}  style={{marginTop:'20px'}}>
                        <i className="icon-Meeting-Participants" style={{color:'#00bafb',fontSize:'19px'}} />
                      </Col>
                      <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@7psuqf`} span={1}>
                      </Col>
                      <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@f0r89l`} span={19}  style={{marginTop:'20px'}}>
                        <div style={{color:'#868686'}}>{nextMeeting && nextMeeting.crmsTitle}</div>
                        <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@sjpey0`}
                        type={18}
                        isSingle={false}
                        replaceDatas={nextMeeting && nextMeeting.crms}
                        viewAttr={1}
                        linkUrl={nextMeeting && nextMeeting.isPro?'/CRM/manage/customer/CustomerBaseView.jsp?CustomerID=':"/spa/crm/static/index.html#/main/crm/customerView?customerId="}
                         />
                      </Col>
                    </Row>
                    :''}
                </Row>)
                )
              }
            </WeaNewScroll>
          </div>
          :
          <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@47t38y`} height={'100%'} className={'right-select-hrm'}> 
            <div style={{height: 'calc(100% - 47px)'}}>
              <div className="user-tree-browser">
                <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@zqh03s`} isSingle={true} linkUrl="/hrm/resource/HrmResource.jsp?id=" title={getLabel(383424,"人力资源")} type="1" viewAttr="2"
                            replaceDatas={userRoot} onChange={this.changeUserRoot}/>
                <span className="user-tree-reset" onClick={() => changeMeetingUserRoot(undefined,'')}><span className="icon-coms-Reset"></span></span>
              </div>
              <div style={{ height: 'calc(100% - 45px)'}}>
                <WeaOrgTree ecId={`${this && this.props && this.props.ecId || ''}_WeaOrgTree@vn2fly`} dataUrl="/api/hrm/base/getHrmResourceTree" rootKey="rootManager" treeNodeClick={this.chooseUser}
                            params={Array.isArray(userRoot) && userRoot[0] ? {rootid: userRoot[0].id} : {}}
                />
              </div>
            </div>
          </WeaNewScroll>
        }
      </div>
    )
  }
  
  onChange = e => {
    const {changeViewcondition} = this.props.meetingCalView
    changeViewcondition(e)
  }
  
  changeUserRoot = (ids, names, datas) => {
    const {changeMeetingPerson, changeMeetingUserRoot} = this.props.meetingCalView
    
    // this.setState({
    //     userRoot: datas
    // });
    changeMeetingUserRoot(datas, ids, names)
    // changeMeetingPerson(ids)
    
  }
  
  chooseUser = (e) => {
    const {changeMeetingPerson} = this.props.meetingCalView
    let userId = '', name = ''
    if (e.selected) {
      userId = e.node.props.id
      name = e.node.props.name
    }
    
    changeMeetingPerson(userId, name)
  }
  
}



